<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="example">
      <p>Original message: "{{ message }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>

      <p>Methods reversed message: "{{ reversedMessage2() }}"</p>
      <p>Methods reversed message: "{{ reversedMessage2() }}"</p>
      <p>Methods reversed message: "{{ reversedMessage2() }}"</p>
    </div>
    <script src="../vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#example',
        data: {
          message: 'Hello',
        },
        computed: {
          // 计算属性的 getter
          reversedMessage: function () {
            console.log('计算属性函数执行了');
            // `this` 指向 vm 实例
            // 会自动根据 所依赖的 message 数据的变化而变化
            var a = this.message.split('').reverse().join('');
            return a;
          },
        },
        methods: {
          // 计算属性的 getter
          reversedMessage2() {
            console.log('方法函数执行了');
            // `this` 指向 vm 实例
            // 会自动根据 所依赖的 message 数据的变化而变化
            return this.message.split('').reverse().join('');
          },
        },
      });
    </script>
  </body>
</html>
